<template>
  <div id="app">
    <!-- 标题栏 -->
    <div class="title-bar">
      <div class="back-arrow">
        <svg 
        t="1747792003449" 
        class="icon" 
        viewBox="0 0 1024 1024" 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        width="25.5" 
        height="25.5"
        @click="goBack"
      >
        <path d="M658.24 210.304H292.544V64L0 283.456l292.544 219.456V356.544H658.24c124.352 0 219.52 95.04 219.52 219.456s-95.104 219.456-219.52 219.456H292.544V941.76H658.24C855.744 941.76 1024 780.8 1024 576S863.104 210.304 658.24 210.304z" 
        fill="#2c2c2c"
      ></path>
      </svg>
      </div>
      <h2>营养教育</h2>
      
    </div>
    
    <!-- 营养教育内容卡片 -->
    <div class="content">
      <!-- 饮食与炎症卡片 -->
      <div class="card" @click="showDetail('饮食与炎症')">
        <div class="card-content">
          <h2>饮食与炎症</h2>
        </div>
      </div>
      
      <!-- 营养指导卡片 -->
      <div class="card" @click="showDetail('营养指导')">
        <div class="card-content">
          <h2>营养指导</h2>
        </div>
      </div>
      
      <!-- 运动锻炼卡片 -->
      <div class="card" @click="showDetail('运动锻炼')">
        <div class="card-content">
          <h2>运动锻炼</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'NutritionEducation',
  setup() {
    // 返回按钮点击事件
    const goBack = () => {
      window.history.back();
    };
    
    // 显示详情内容
    const showDetail = (title) => {
      alert(`您点击了${title}，这里将显示详细内容`);
    };
    
    return {
      goBack,
      showDetail
    };
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
}

/* 标题栏样式 */
.header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.back-icon {
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
}

.header h1 {
  font-size: 18px;
  margin: 0;
}

/* 内容区域样式 */
.content {
  padding: 15px;
}

/* 卡片样式 */
.card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-5px);
}

.card-content {
  padding: 20px;
}

/* 饮食与炎症卡片样式 */
.card:nth-child(1) {
  background-color: #ffcce6;
}

.card:nth-child(1) .card-content h2 {
  color: #ff66b2;
}

/* 营养指导卡片样式 */
.card:nth-child(2) {
  background-color: #c5e6c5;
}

.card:nth-child(2) .card-content h2 {
  color: #5eab5e;
}

/* 运动锻炼卡片样式 */
.card:nth-child(3) {
  background-color: #c5d7e6;
}

.card:nth-child(3) .card-content h2 {
  color: #4d8abd;
}
.title-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.back-arrow {
  margin-right: 10px;
}

</style>